<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery</title>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    /*<![CDATA[*/
    function postData() {
        var data = 'no=' + $('#no').val() + '&quantity=' + $('#quantity').val()
                + '&date=' + $('#date').val();

        $.ajax({
            type : 'POST',
            url : '/postData',
            data : data,
            success : function(r) {
                console.log(r);
            },
            error : function() {
                alert('error!')
            }
        });
    }

    function postJson() {
        var data = {
            no : $('#no').val(),
            quantity : $('#quantity').val(),
            date : $('#date').val()
        };
        $.ajax({
            type : 'POST',
            contentType : 'application/json',
            url : '/postJson',
            data : JSON.stringify(data),
            success : function(r) {
                console.log(r);
            },
            error : function() {
                alert('error!')
            }
        });
    }
    /*]]>*/
</script>
</head>
<body>
    no:
    <input id="no" value="No.1234567890" />
    <br /> quantity:
    <input id="quantity" value="100" />
    <br /> date:
    <input id="date" value="2016-12-20" />
    <br />
    <input value="postData" type="button" onclick="postData()" />
    <br />
    <input value="postJson" type="button" onclick="postJson()" />
</body>
</html>